<template>
  <el-button type="primary" @click="loadAdd">axios</el-button>
  <el-table ref="singleTableRef" :data="tableData" highlight-current-row style="width: 100%"
    @current-change="handleCurrentChange">
    <el-table-column type="index" width="50" />
    <el-table-column property="deptno" label="Deptno" width="120" />
    <el-table-column property="dname" label="Dname" width="120" />
    <el-table-column property="loc" label="Loc" />
    <!-- 自定义操作框 -->
    <el-table-column label="Operations">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>

  </el-table>
  <div style="margin-top: 20px">
    <el-button @click="setCurrent(tableData[1])">Select second row</el-button>
    <el-button @click="setCurrent()">Clear selection</el-button>
    <el-button @click="search" type="primary">查询</el-button>
  </div>

  <el-button text @click="add_dia">
    新建
  </el-button>


  <el-dialog v-model="dialogVisible" title="Tips" width="30.9%">
    <!-- <span>添加一条数据</span><br/>
    姓名<input v-model="dept.name_in" type="text"/><br/>
    位置<input v-model="dept.loc" type="text"/> -->
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          Confirm
        </el-button>
        <el-button @click="add">提交</el-button>
      </span>
    </template>
    <el-form :model="form">
      <el-form-item label="编号" :label-width="formLabelWidth">
        <el-input disabled v-model="form.deptno" autocomplete="off" />
      </el-form-item>
      <el-form-item label="名称" :label-width="formLabelWidth">
        <el-input v-model="form.dname" autocomplete="off" />
      </el-form-item>
      <el-form-item label="地址" :label-width="formLabelWidth">
        <el-select v-model="form.loc" placeholder="Please select a zone">
          <el-option label="燕山大学" value="shanghai" />
          <el-option label="秦皇岛" value="beijing" />
        </el-select>
      </el-form-item>
    </el-form>
  </el-dialog>

</template>

<script setup>
import $ajax from '../../utils/axios'

import { ref } from 'vue'
import { ElTable } from 'element-plus'
import axios from "axios"
const formLabelWidth = "70px"

const form = ref({
  deptno: 0,
  dname: '赵子鉴部门',
  loc: '信息馆',
})

const currentRow = ref()
const singleTableRef = ref(null)
const dialogVisible = ref(false)
//声明一个响应式变量
const tableData = ref([])
let curidx=-1

const loadAdd=() => {
  $ajax.get("/dept/q/all")
  .then((res) => {
    console.log(res.data.result);
    tableData.value = res.data.result;
  })
}

const add_dia=()=>{
  form.value=JSON.parse(JSON.stringify({  
      deptno: 0,
      dname: '赵子鉴部门',
      loc: '信息馆'}))
  form.value.deptno=0;

  dialogVisible.value = true;
}

const add = () => {
  dialogVisible.value = true;
  
  if (form.value.deptno === 0) {
    //新增
    form.value=JSON.parse(JSON.stringify({  
      deptno: 0,
      dname: '赵子鉴部门',
      loc: '信息馆'}))
    axios.put("http://localhost:8080/dept/add", form.value, {
      headers: {
        'Content-Type': 'application/json;charset=utf-8'
      }
    }).then(res => {
      form.value.deptno = res.data.result;
      let obj = JSON.parse(JSON.stringify(form.value));

      tableData.value.push(obj);
      console.log("PUT 请求成功", res.data);
      dialogVisible.value = false;
    })
  }else{
    //修改
    console.log(form.value);

    axios.post("http://localhost:8080/dept/update", form.value, {
      headers: {
        'Content-Type': 'application/json;charset=utf-8'
      }
    }).then(res => {
      form.value=res.data.result;
      console.log(form.value);
      tableData.value.splice(curidx,1,form.value);

      console.log("PUT 请求成功", res.data);
      dialogVisible.value = false;
    }).catch(error=>{
      console.log("错误信息",error);
    })
    console.log("123");
    
  } 
}

const handleEdit = (index, row) => {
  
  curidx.value=row.deptno;
  console.log("curidx="+row.deptno);
  form.value =JSON.parse(JSON.stringify(row));
  
  console.log(index, row)
  dialogVisible.value = true;
}
const handleDelete = (index, row) => {
  console.log(index, row)
}
const setCurrent = (row) => {
  singleTableRef.value?.setCurrentRow(row)
}

const handleCurrentChange = (val) => {
  currentRow.value = val
}
const search = () => {
  console.log(sessionStorage.getItem("empJSON"));
}



</script>
  